<template>
  <div class="t-no-data">
    <div class="content" v-if="type == 'cart'">
      <img class="no-data" src="@/assets/images/icons/no-cart.png" alt="" />
      <p class="text">{{ text ? text : $t('public.buyChat') }}</p>
    </div>
    <div class="content data-content" v-if="type == 'data'">
      <img class="no-data" src="@/assets/images/icons/no-cart.png" alt="" />
      <p class="text">{{ text ? text : $t('public.noData') }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "t-no-data",
  props: {
    text: String,
    type: {
      default: 'data',
      type: String
    }
  }
}
</script>

<style scoped lang="less">
.t-no-data {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0;

  .content {
    .no-data {
      display: block;
      width: 200px;
      margin: 0 auto;

      img {
        width: 100%;
      }
    }

    .text {
      text-align: center;
      color: #515A6E;
      font-size: 14px;
    }
  }

  .data-content {
    .no-data {
      width: 150px;
    }

    .text {
      margin-top: 12px;
    }
  }
}
</style>